<template>
	<view class="container">
		<text>{{openId}}</text>
		<br />
		<text>{{sessionKey}}</text>
		<br />
		
		 <!-- 获取头像 -->
		<view class="bg-gray padding-top-sm">
			<button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image :class="avatarUrl ==''?'avatar-img':'' " :src="avatarUrl"></image>
			</button>
		</view>
		<!-- 输入用户名 -->
		<view class="nickname-code">
			<view class="nickname-title">
				用户名:
			</view>
			<input type="nickname" class="weui-input" placeholder="请输入用户名" v-model="nickname" />
		</view>
		<!-- 手机号登录 企业认证才能使用 -->
		<!-- <view class="padding-lr padding-top flex flex-direction">
			<button class="cu-btn bg-green round lg text-white" open-type="getPhoneNumber"
				@getphonenumber="getUserPhone" :disabled="explainName == '' ? false : true">微信手机号登录</button>
		</view> -->
		<view class="text-red text-df padding-lr-xl padding-tb-xs text-center">
			{{explainName}}
		</view>
		
	</view>
</template>


<script setup>

import { wxlogin } from './index.js'
import { computed, ref } from "vue";
	
const openId = ref("");
const sessionKey = ref("")

// 头像
const avatarUrl = ref("");
const nickname = ref("");
const disabled = ref(true);

const explainName = computed(() => {
	let name = ""
	if (avatarUrl.value == '') {
		name = "请授权用户头像"
		return name;
	}
	if (nickname.value == '') {
		name = "请输入用户名"
		return name;
	}
	return name;
})

//封装微信获取用户code，避免嵌套
function login() {
	return new Promise((resolve, reject) => {
		uni.login({
			success(res) {
				resolve(res);
			},
			fail(err) {
				reject(err);
			}
		});
	});
}

function onChooseAvatar(e) {
	// console.log(e.detail);
	avatarUrl.value = e.detail.avatarUrl
}

function getUserPhone(e) {
	if (e.detail.errMsg == 'getPhoneNumber:ok') {
		//出来手机号数据
		console.log("手机号数据", e)
		/*
			在这一步把 手机号 头像 昵称 code 一次性全部丢给后端
		*/
	} else {
		console.log("授权失败无法登录！")
	}
}

function init() {
    //调用微信登陆
    let res = await login()
    if (res.code && ['login:ok'].includes(res.errMsg)) {
        //后端通过code调用微信API返回openid/unionid/session_key参数， 存储起来,前端无法直接调用微信相关API
        let openIdRes = await wxlogin(res.code)
		openId.value = openIdRes.data.data.openid
		sessionKey.value = openIdRes.data.data.sessionKey
    } 
}

init()

</script>

<style>
	 page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
    // 用户头像
    .avatar-button {
        width: 120rpx;
        padding: 0;
        border-radius: 50%;
        margin: 30rpx auto 0 auto;

        image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            display: block;
            border: 4rpx solid #d8bf9f;
        }
    }

    .avatar-img {
        z-index: 3;
        position: relative;

        &:before {
            content: '头像授权';
            position: absolute;
            top: 0;
            left: 0;
            width: 120rpx;
            height: 120rpx;
            // line-height: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 25rpx;
            background-color: rgba(130, 128, 127, 0.5);
            z-index: 4;
        }
    }

    //用户昵称
    .nickname-code {
        display: flex;
        align-items: center;
        padding: 60rpx 20rpx 20rpx 20rpx;
        margin-top: -40rpx;
        background-color: #ffffff;
        border-radius: 50rpx 50rpx 0 0;

        .nickname-title {
            font-size: 30rpx;
            color: #333;
            margin-right: 15rpx;
        }

        .weui-input {
            flex: 1;
            color: #333;
            font-size: 30rpx;
        }
    }
</style>
